<script setup lang="ts">
import * as videoApis from '@/apis/video'
import { type typeSwiper } from '@/apis/video'
import { ref, type Ref, watch, watchEffect } from 'vue'
import { useResizeObserver } from '@vueuse/core'
const props = defineProps(['typeId'])

const swiperList: Ref<typeSwiper[]> = ref([])
const swiperListIndex = ref(0)

watch(
  () => props.typeId,
  () => {
    swiperList.value = []
    if (props.typeId == 0) return
    videoApis.getSwiper(props.typeId).then(res => {
      swiperList.value = res.data.data
    })
  },
  {
    immediate: true
  }
)

const swiperHeight = ref(0)
const iref = ref()
useResizeObserver(iref, entries => {
  const entry = entries[0]
  let height = Math.max(Math.min(entry.target.clientWidth, 2376), 1100) * 0.4
  if (Math.abs(swiperHeight.value - height) > 20) swiperHeight.value = height
})
</script>

<template>
  <div ref="iref" v-if="swiperList.length != 0" id="swiperShow" :style="`height:${swiperHeight}px`">
    <router-link target="_blank" :to="`/play/${swiperList[swiperListIndex]?.vod_id}`">
      <el-image class="bgImg" :class="{ 'bgImg-it': swiperListIndex == index }" v-for="(item, index) in swiperList" :key="index" :src="item.vod_img" fit="cover">
        <template #error>
          <div class="image-slot">
            <el-icon><icon-picture /></el-icon>
          </div>
        </template>
      </el-image>
      <div class="linerColorBg"></div>
    </router-link>

    <div class="pickBox">
      <div class="pickBox-info" v-if="swiperList[swiperListIndex]">
        <p>《{{ swiperList[swiperListIndex].vod_name }}》</p>
        <p>{{ swiperList[swiperListIndex].vod_info }}</p>
      </div>
      <div class="pickBox-item-box">
        <router-link target="_blank" :to="`/play/${item.vod_id}`" v-for="(item, index) in swiperList" :key="index">
          <div class="pickBox-item" :class="{ 'pickBox-item-it': swiperListIndex == index }" @mouseenter="swiperListIndex = index">
            <el-image class="boxBg" :src="item.vod_img_small" fit="cover">
              <template #error>
                <div class="image-slot">
                  <el-icon><icon-picture /></el-icon>
                </div>
              </template>
            </el-image>
            <p>{{ item.vod_name }}</p>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
#swiperShow {
  color: #fff;
  position: relative;
  width: 100%;
  min-height: 500px;
  margin-bottom: -70px;

  .bgImg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 0;

    &-it {
      z-index: 0;
      animation: 0.5s linear 0s showitAnimon;
      opacity: 1;

      @keyframes showitAnimon {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
    }
  }

  .linerColorBg {
    background: linear-gradient(to top, rgba(22, 22, 26, 255), rgba(22, 22, 26, 0) 30%);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;

    &::after {
      display: block;
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      height: 100%;
      background: linear-gradient(to left, rgba(22, 22, 26, 0), rgba(22, 22, 26, 1));
    }

    &::before {
      display: block;
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      width: 600px;
      height: 100%;
      background: linear-gradient(to right, rgba(22, 22, 26, 0), rgba(22, 22, 26, 1));
    }
  }

  .pickBox {
    bottom: 20px;
    right: 60px;
    position: absolute;

    &-info {
      font-size: 30px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 20px;
      width: 100%;
      text-align: right;

      p:first-child {
        font-size: 40px;
      }
    }

    .pickBox-item {
      > p {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        text-align: center;
      }
    }

    .pickBox-item-box {
      display: flex;
      align-items: center;
    }

    &-item {
      width: (70px * 1.5);
      height: (100px * 1.5);
      border-radius: 10px;
      // overflow: hidden;
      margin-left: 15px;
      // border: 2px solid rgba(1, 206, 205, 1);

      .boxBg {
        height: 100%;
        width: 100%;
        border-radius: 10px;
      }

      &-it {
        .boxBg {
          border: 3px solid rgba(1, 206, 205, 1);
        }
      }
    }
  }
}

.router-link-active {
  text-decoration: none;
}

a {
  text-decoration: none;
  * {
    color: #fff;
  }
}
</style>
